<template>
  <view class="venue-container">
    <view class="venue-list" v-if="venues.length > 0">
      <view 
        v-for="(venue, index) in venues" 
        :key="index" 
        class="venue-item"
      >
        <image class="nav-icon" src="/static/导航.png" @click="openNavigation(venue)"></image>
        <text v-if="venue.distance" class="distance-text">{{ venue.distance }}km</text>
        <view class="venue-content">
          <view class="venue-info">
            <text class="venue-club" @click="goToDetail(venue)">{{ venue.dataSource }}</text>
            <text class="venue-name" @click="goToDetail(venue)">{{ venue.name }}</text>
            <text class="venue-location" @click="goToDetail(venue)">{{ venue.location }}</text>
            
            <view class="venue-meta">
              <text class="price" @click="goToDetail(venue)"></text>
              <!-- <text 
                v-if="venue.available !== undefined"
                :class="['status', { 'available': venue.available }]"
                @click="goToDetail(venue)"
              >
                {{ venue.available ? '可预订' : '已满' }}
              </text> -->
            </view>
          </view>
        </view>
        <view class="book-button" @click="goToBooking(venue)">去订场</view>
      </view>
      
      
    </view>
    <view v-if="loading" class="loading">加载中...</view>
      <view v-else-if="hasMore" class="load-more" @click="$emit('load-more')">点击加载更多</view>
      <view v-else class="no-more">没有更多了</view>
      <view class="customer-service-section">
        <button open-type="contact" class="customer-service-text">
    联系客服
  </button>
      </view>

        <!-- 自定义模态框 -->
    <view v-if="showCustomModal" class="custom-modal-mask" @click="closeModal">
      <view class="custom-modal" @click.stop>
        <view class="modal-header">联系客服</view>
        <view class="modal-content">添加微信：ZHAIHANNENG</view>
        <view class="modal-footer">
          <view class="modal-button customer-service-cancel" @click="closeModal">取消</view>
          <view class="modal-button customer-service-copy" @click="copyWechat">复制微信号</view>
        </view>
      </view>
    </view>
    
    <!-- 地址选择弹窗 -->
    <view v-if="showAddressModal" class="custom-modal-mask" @click="closeAddressModal">
      <view class="custom-modal" @click.stop>
        <view class="modal-header">选择地址</view>
        <view class="modal-content">
          <view class="address-list">
            <view 
              v-for="(address, index) in venueAddresses" 
              :key="index" 
              class="address-item"
              @click="selectAddress(address)"
            >
              <view class="address-location">{{ address.location }}</view>
              <view class="address-detail">{{ address.address }}</view>
              <view class="address-primary" v-if="address.isPrimary">主要地址</view>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <view class="modal-button cancel-button" @click="closeAddressModal">取消</view>
        </view>
      </view>
    </view>
</view>
  
</template>

<script>
import { getVenueByName, getVenueByDataSource, getVenueCoordinates, getVenueAddress, getVenueAllAddresses } from '../common/venueConfig.js';

export default {
  name: 'VenueList',
  props: {
    venues: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    hasMore: {
      type: Boolean,
      default: true
    },
    selectedDate: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showCustomModal: false,
      showAddressModal: false,
      currentVenue: null,
      venueAddresses: [],
      userLocation: null
    }
  },
  
  mounted() {
    this.getUserLocation();
  },
  
  watch: {
    venues: {
      handler(newVenues) {
        // 当venues加载完成且有用户位置时计算距离
        if (this.userLocation && newVenues && newVenues.length > 0) {
          this.calculateDistances();
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    openNavigation(venue) {
      // 从配置文件中获取球馆的详细信息
      const venueConfig = getVenueByDataSource(venue.dataSource);
      
      if (venueConfig) {
        const allAddresses = getVenueAllAddresses(venueConfig.id);
        
        if (allAddresses.length > 1) {
          // 如果有多个地址，检查当前场的名字是否在include数组内
          let targetAddress = null;
          
          for (let address of allAddresses) {
            if (address.include && address.include.includes(venue.name)) {
              targetAddress = address;
              break;
            }
          }
          
          if (targetAddress) {
            // 如果找到匹配的地址，直接导航
            this.navigateToAddress(venueConfig, targetAddress);
          } else {
            // 如果没有找到匹配的地址，显示地址选择弹窗
            this.currentVenue = venueConfig;
            this.venueAddresses = allAddresses;
            this.showAddressModal = true;
          }
        } else {
          // 如果只有一个地址，直接导航
          this.navigateToAddress(venueConfig, allAddresses[0]);
        }
      } else {
        uni.showToast({
          title: '球馆配置信息未找到',
          icon: 'none'
        });
      }
    },
    
    navigateToAddress(venueConfig, address) {
      uni.openLocation({
        latitude: address.latitude,
        longitude: address.longitude,
        name: venueConfig.name,
        address: address.address,
        success: function() {
          console.log('打开导航成功');
        },
        fail: function(err) {
          console.error('打开导航失败', err);
          uni.showToast({
            title: '导航功能暂不可用',
            icon: 'none'
          });
        }
      });
    },
    
    selectAddress(address) {
      this.navigateToAddress(this.currentVenue, address);
      this.showAddressModal = false;
    },
    
    closeAddressModal() {
      this.showAddressModal = false;
      this.currentVenue = null;
      this.venueAddresses = [];
    },
    
    goToDetail(venue) {
      // 跳转到场地详情页
      // uni.navigateTo({
      //   url: `/pages/venue/detail?venueId=${venue.id}`
      // })
    },
    
    contactCustomerService() {
      this.showCustomModal = true;
    },
    
    closeModal() {
      this.showCustomModal = false;
    },
    
    copyWechat() {
      // 复制微信号到剪贴板
      uni.setClipboardData({
        data: 'ZHAIHANNENG',
        success: () => {
          uni.showToast({
            title: '微信号已复制',
            icon: 'success',
            duration: 2000
          });
          this.closeModal();
        }
      });
    },
    
    getUserLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.userLocation = {
            latitude: res.latitude,
            longitude: res.longitude
          };
          console.log('获取用户位置成功:', this.userLocation);
          

          
          // 获取位置成功后，如果venues已加载则计算距离
          if (this.venues && this.venues.length > 0) {
            this.calculateDistances();
          }
        },
        fail: (err) => {
          console.error('获取位置失败1', err);
          // uni.showToast({
          //   title: '获取位置失败1'+err,
          //   icon: 'none'
          // });
          
        }
      });
    },
    

    
    calculateDistances() {
      // 确保用户位置和venues都已加载
      if (!this.userLocation || !this.venues || this.venues.length === 0) {
        console.log('calculateDistances: 数据未准备好', {
          userLocation: !!this.userLocation,
          venues: this.venues ? this.venues.length : 0
        });
        return;
      }
      
      console.log('calculateDistances: 开始计算距离', {
        userLocation: this.userLocation,
        venuesCount: this.venues.length
      });
      
      const venuesWithDistance = this.venues.map(venue => {
        const venueConfig = getVenueByDataSource(venue.dataSource);
        if (venueConfig) {
          // 根据场馆名称匹配include数组来选择正确的地址
          let targetAddress = null;
          
          // 遍历所有地址，查找include数组包含当前场馆名称的地址
          for (let address of venueConfig.addresses) {
            if (address.include && address.include.includes(venue.name)) {
              targetAddress = address;
              break;
            }
          }
          
          // 如果没有找到匹配的地址，则使用主要地址或第一个地址
          if (!targetAddress) {
            targetAddress = venueConfig.addresses.find(addr => addr.isPrimary) || venueConfig.addresses[0];
          }
          
          const distance = this.getDistance(
            this.userLocation.latitude,
            this.userLocation.longitude,
            targetAddress.latitude,
            targetAddress.longitude
          );
          return {
            ...venue,
            distance: distance.toFixed(1) 
          };
        }
        return venue;
      });
      
      // 根据距离从小到大排序
      venuesWithDistance.sort((a, b) => {
        const distanceA = parseFloat(a.distance);
        const distanceB = parseFloat(b.distance);
        return distanceA - distanceB;
      });
      
      console.log("venuesWithDistance",venuesWithDistance,this.venues);
      
      // 更新venues数组
      this.$emit('update:venues', venuesWithDistance);
    },
    
    getDistance(lat1, lon1, lat2, lon2) {
      // 注意：参数顺序是 (纬度, 经度)
      
      // 将GCJ-02坐标转换为WGS-84坐标（球馆配置中的坐标是WGS-84）
      const wgs2 = this.gcj02ToWgs84(lat1, lon1);
      
      const R = 6371; // 地球半径，单位千米
      const dLat = this.deg2rad(lat2 - wgs2.lat);
      const dLon = this.deg2rad(lon2 - wgs2.lng);
      const a = 
        Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(this.deg2rad(wgs2.lat)) * Math.cos(this.deg2rad(lat2)) * 
        Math.sin(dLon/2) * Math.sin(dLon/2);
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
      const distance = R * c; // 单位千米
      
      return distance;
    },
    
    // GCJ-02 转换为 WGS-84
    gcj02ToWgs84(lat, lng) {
      if (this.outOfChina(lat, lng)) {
        return { lat, lng };
      }
      
      let dLat = this.transformLat(lng - 105.0, lat - 35.0);
      let dLng = this.transformLng(lng - 105.0, lat - 35.0);
      const radLat = lat / 180.0 * Math.PI;
      let magic = Math.sin(radLat);
      magic = 1 - 0.00669342162296594323 * magic * magic;
      const sqrtMagic = Math.sqrt(magic);
      dLat = (dLat * 180.0) / ((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtMagic) * Math.PI);
      dLng = (dLng * 180.0) / (6378245.0 / sqrtMagic * Math.cos(radLat) * Math.PI);
      
      return {
        lat: lat - dLat,
        lng: lng - dLng
      };
    },
    
    // 判断是否在中国境内
    outOfChina(lat, lng) {
      return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
    },
    
    transformLat(x, y) {
      let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
      ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
      ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
      ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;
      return ret;
    },
    
    transformLng(x, y) {
      let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
      ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
      ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
      ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;
      return ret;
    },
    
    deg2rad(deg) {
      return deg * (Math.PI/180);
    },
    

    
    goToBooking(venue) {
      console.log('venue',venue);
      
      // 格式化日期函数（去掉年份，格式化为月-日，不添加前导零）
      const formatDateWithoutYear = (dateStr) => {
        const date = new Date(dateStr);
        const month = (date.getMonth() + 1).toString();
        const day = date.getDate().toString();
        return `${month}-${day}`;
      };
      
      // 根据dataSource判断是否跳转到其他小程序
      if (venue.dataSource === '库卡网球') {
        // 跳转到库卡俱乐部小程序
        uni.navigateToMiniProgram({
          appId: 'wxcd599231d6596bf3',
          path: 'mpxPackages/sport/pages/venue-booking', // 可以指定跳转的页面路径
					extraData: {
						foo: 'bar'
					},
					envVersion: 'release',
          success: (res) => {
            console.log('跳转到库卡俱乐部小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到库卡俱乐部小程序失败', err);
            // uni.showToast({
            //   title: '跳转失败',
            //   icon: 'none'
            // });
          }
        });
      } else if (venue.dataSource === '向阳彩鸿湾') {
        // 跳转到向阳彩鸿湾小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403170525',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳彩鸿湾小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳彩鸿湾小程序失败', err);
          }
        });
      } else if (venue.dataSource === '向阳康帝校区') {
        // 跳转到向阳康帝校区小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403144937',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳康帝校区小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳康帝校区小程序失败', err);
          }
        });
      } else if (venue.dataSource === '向阳雅园校区') {
        // 跳转到向阳雅园校区小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403150429',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳雅园校区小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳雅园校区小程序失败', err);
          }
        });
      } else if (venue.dataSource === '向阳33小镇校区') {
        // 跳转到向阳33小镇校区小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403143353',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳33小镇校区小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳33小镇校区小程序失败', err);
          }
        });
      } else if (venue.dataSource === '向阳星河城校区') {
        // 跳转到向阳星河城校区小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403102307',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳星河城校区小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳星河城校区小程序失败', err);
          }
        });
      } else if (venue.dataSource === '向阳振兴城校区') {
        // 跳转到向阳振兴城校区小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403160622',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳振兴城校区小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳振兴城校区小程序失败', err);
          }
        });
      } else if (venue.dataSource === '拓德网球俱乐部') {
        // 跳转到拓德网球俱乐部小程序
        uni.navigateToMiniProgram({
          appId: 'wx7cb33b5481dbfde4',
          path: 'pages/detail/detail?id=2112235080',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到拓德网球俱乐部小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到拓德网球俱乐部小程序失败', err);
          }
        });
      }else if (venue.dataSource === '爱动金丰网球俱乐部') {
        // 跳转到爱动金丰网球俱乐部小程序
        uni.navigateToMiniProgram({
          appId: 'wxbb9d5b3237778386',
          path: 'mpxPackages/sport/pages/venue-booking',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到爱动金丰网球俱乐部小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到爱动金丰网球俱乐部小程序失败', err);
          }
        });
      } else if (venue.dataSource === '卓乐网球') {
        // 跳转到爱动金丰网球俱乐部小程序
        uni.navigateToMiniProgram({
          appId: 'wx92d22e775454c87f',
          path: 'subPages/education/pages/venue/booking',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到卓乐网球俱乐部小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到卓乐网球俱乐部小程序失败', err);
          }
        });
      } else if (venue.dataSource === '爱力网球') {
        // 跳转到爱力网球俱乐部小程序
        uni.navigateToMiniProgram({
          appId: 'wx852462a7ef513cbf',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到爱力网球俱乐部小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到爱力网球俱乐部小程序失败', err);
          }
        });
      } else if (venue.dataSource === '东城体育公园') {
        // 跳转到东城体育公园小程序
        const formattedDate = formatDateWithoutYear(this.selectedDate || new Date().toISOString().split('T')[0]);
        console.log("formattedDate",formattedDate);
        
        uni.navigateToMiniProgram({
          appId: 'wx8d10f95b126926f3',
          
          // path: `pages/subscribeField/subscribeField?gym_id=1&before_date=5&order_sch_num_limit=5&date=${formattedDate}&site_open_end_time=22:00&site_open_start_time=06:00&type=site&site_bill_unit=60`,
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到东城体育公园小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到东城体育公园小程序失败', err);
          }
        });
      } else if (venue.dataSource === '东莞市体育中心') {
        // 跳转到东莞市体育中心小程序
        const formattedDate = formatDateWithoutYear(this.selectedDate || new Date().toISOString().split('T')[0]);
        uni.navigateToMiniProgram({
          appId: 'wx1580fe42a03dad09',
          // path: `pages/subscribeField/subscribeField?gym_id=5&site_bill_unit=60&type=site&site_open_end_time=22:00&before_date=6&site_open_start_time=06:00&date=${formattedDate}`,
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到东莞市体育中心小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到东莞市体育中心小程序失败', err);
          }
        });

      } else if (venue.dataSource === '3.5+网球（新基）') {
        // 跳转到3.5+网球（新基）小程序
        uni.navigateToMiniProgram({
          appId: 'wxbba37fa369c19fac',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到3.5+网球（新基）小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到3.5+网球（新基）小程序失败', err);
          }
        });
      } else if(venue.dataSource === '3.5+网球（金色华庭店）'){
        uni.navigateToMiniProgram({
          appId: 'wxbba37fa369c19fac',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到3.5+网球（新基）小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到3.5+网球（新基）小程序失败', err);
          }
        });
      } else if (venue.dataSource === '松山湖太鲁阁公园') {
        // 跳转到松山湖太鲁阁公园小程序
        const formattedDate = formatDateWithoutYear(this.selectedDate || new Date().toISOString().split('T')[0]);
        console.log("formattedDate", formattedDate);
        
        uni.navigateToMiniProgram({
          appId: 'wx9b73889b14b32f3d',
          path: `pages/subscribeField/subscribeField?leave_check=0&is_ticket=0&order_sites_max=3&gym_id=42&site_bill_unit=60&site_reserve_before_date=3&is_unique=1&order_sch_num_limit=undefined&name=太鲁阁公园体育场-网球场&date=${formattedDate}&plague_pvt=0&site_open_end_time=22:00&site_open_start_time=07:00&ticket_reserve_before_date=3&type=site&is_site=1`,
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到松山湖太鲁阁公园小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到松山湖太鲁阁公园小程序失败', err);
          }
        });
      } else if (venue.dataSource === '为傲网球（香树店）') {
        // 跳转到为傲网球（香树店）小程序
        uni.navigateToMiniProgram({
          appId: 'wxb220eeda2e7b1a68',
          path: 'main/pages/order/venue?venueTabsType=1&type=1&id=863',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到为傲网球（香树店）小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到为傲网球（香树店）小程序失败', err);
          }
        });
      } else if (venue.dataSource === '3.5+网球（福地）') {
        // 跳转到3.5+网球（福地）小程序
        uni.navigateToMiniProgram({
          appId: 'wx2b9954e1caef716e',
          path: 'booking/pages/space/index?type=1&typeId=463560331927552&shopName=福地室内标准场&shopId=455834640958464',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到3.5+网球（福地）小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到3.5+网球（福地）小程序失败', err);
          }
        });
      } else if (venue.dataSource === '埗击网球') {
        // 跳转到埗击网球小程序
        uni.navigateToMiniProgram({
          appId: 'wxb82a611c68b78f40',
          path: 'mpxPackages/sport/pages/venue-booking',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到埗击网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到埗击网球小程序失败', err);
          }
        });
      } else if (venue.dataSource === '源峰网球') {
        // 跳转到源峰网球小程序
        uni.navigateToMiniProgram({
          appId: 'wx8a322a3fb5d9ea1c',
          path: 'mpxPackages/sport/pages/venue-booking',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转源峰网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转源峰网球小程序失败', err);
            uni.showToast({
              title: '跳转失败',
              icon: 'none'
            });
          }
        });
      } else if (venue.dataSource === '罗杰网球') {
        // 跳转到罗杰网球小程序
        uni.navigateToMiniProgram({
          appId: 'wx36f7f7e8642b69c7',
          path: 'pages/pagesA/place-reserve/index?id=17&schoolId=326',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转罗杰网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转罗杰网球小程序失败', err);
            uni.showToast({
              title: '跳转失败',
              icon: 'none'
            });
          }
        });
      } else if (venue.dataSource === '月击网球（丰泰校区）' 
      || venue.dataSource === '月击网球（电商园校区）'
      || venue.dataSource === '月击网球（虎门大道校区）'
      || venue.dataSource === '月击网球（城市之光校区）') {
        // 跳转到月击网球小程序
        uni.navigateToMiniProgram({
          appId: 'wxdfc7d821850778b9',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转月击网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转月击网球小程序失败', err);
            uni.showToast({
              title: '跳转失败',
              icon: 'none'
            });
          }
        });
      } else {
        // 跳转到订场页面
        uni.redirectTo({
          url: `/pages/booking/booking?venueId=${venue.id}`
        });
      }
    }
  }
}
</script>

<style scoped>
/* 添加自定义字体 */
@font-face {
  font-family: 'AaHouDiHei';
  src: url('https://mp-0c81a8be-aa9a-4fae-8d6c-54b797768401.cdn.bspapp.com/cloudstorage/SmileySans-Oblique-3.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.venue-list {
  /* padding: 20rpx; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 
}
.venue-container {
  padding-bottom: 100px;
}
.venue-item {
  width: 42.5%; /* 一行显示两项，留出一些间距 */
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  /* border: 1rpx solid #eee; */
  border-radius: 30rpx;
  background: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8rpx 32rpx 0 rgba(31, 38, 135, 0.15);
  margin-bottom: 20rpx;
  transition: all 0.3s ease;
  animation: fadeInUp 0.5s ease-out;
  animation-fill-mode: both;
  position: relative;
      justify-content: space-between;
}

.venue-item:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 12rpx 40rpx 0 rgba(31, 38, 135, 0.25);
  background: rgba(255, 255, 255, 0.3);
}

.venue-item:nth-child(1) { animation-delay: 0.1s; }
.venue-item:nth-child(2) { animation-delay: 0.2s; }
.venue-item:nth-child(3) { animation-delay: 0.3s; }
.venue-item:nth-child(4) { animation-delay: 0.4s; }
.venue-item:nth-child(5) { animation-delay: 0.5s; }
.venue-item:nth-child(6) { animation-delay: 0.6s; }

.nav-icon {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 50rpx;
  height: 50rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.nav-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

.nav-icon:active {
  transform: scale(0.95);
}

.distance-text {
  position: absolute;
  top: 75rpx;
  right: 20rpx;
  font-size: 20rpx;
  color: #666;
  font-weight: 500;
  min-width: 60rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.distance-text:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.05);
  color: #333;
}

.venue-content {
  display: flex;
  margin-bottom: 10rpx;
}

.venue-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 10rpx;
}

.venue-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  transition: all 0.3s ease;
  margin-right: 62rpx;
}

.venue-name:hover {
  color: #007AFF;
  transform: translateX(4rpx);
}

.venue-location {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
  transition: all 0.3s ease;
}

.venue-location:hover {
  color: #333;
  transform: translateX(4rpx);
}

.venue-club {
  font-size: 26rpx;
  color: rgb(46 128 49 / 90%);
  margin-bottom: 15rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-right: 50rpx;
  font-family: 'AaHouDiHei', sans-serif;
}

.venue-club:hover {
  color: rgb(55, 126, 58);
  transform: translateX(4rpx);
}

.venue-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 30rpx;
  color: #ff6600;
  font-weight: bold;
}

.status {
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
  background-color: #ff4d4f;
  color: white;
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

.status.available {
  background-color: #52c41a;
  animation: none;
}

.status:hover {
  transform: scale(1.1);
  box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.2);
}

.book-button {
  margin-top: 10rpx;
  padding: 16rpx 20rpx;
  background: linear-gradient(135deg, rgba(46, 213, 115, 0.9), rgba(0, 184, 148, 0.85));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 300rpx;
  font-size: 26rpx;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: pointer;
  user-select: none;
  box-shadow: 
    0 8rpx 24rpx 0 rgba(46, 213, 115, 0.4),
    0 4rpx 12rpx 0 rgba(46, 213, 115, 0.2),
    inset 0 1rpx 2rpx 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.book-button::before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 400px;
    box-shadow: inset 0 3px 10px rgba(60, 255, 231, 0.6), inset 0 -3px 4px rgba(106, 255, 237, 0.3);
}

.book-button:hover {
  transform: translateY(-2rpx);
  box-shadow: 
    0 12rpx 28rpx 0 rgba(46, 213, 115, 0.5),
    0 6rpx 16rpx 0 rgba(46, 213, 115, 0.3),
    inset 0 1rpx 2rpx 0 rgba(255, 255, 255, 0.4);
}

.book-button:hover::before {
  opacity: 1;
}

.book-button:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, rgba(0, 184, 148, 0.95), rgba(46, 213, 115, 0.9));
  box-shadow: 
    0 4rpx 16rpx 0 rgba(46, 213, 115, 0.5),
    0 2rpx 8rpx 0 rgba(46, 213, 115, 0.3),
    inset 0 1rpx 2rpx 0 rgba(255, 255, 255, 0.4);
}

.loading, .load-more, .no-more {
  text-align: center;
  padding: 20rpx;
  font-size: 28rpx;
  margin: 20rpx 0;
  transition: all 0.3s ease;
}

.load-more {
  color: #007AFF;
  cursor: pointer;
  /* background: rgba(0, 122, 255, 0.1);
  border: 1px solid rgba(0, 122, 255, 0.2); */
}

.load-more:hover {
  background: rgba(0, 122, 255, 0.15);
  transform: translateY(-2rpx);
  box-shadow: 0 12rpx 40rpx 0 rgba(0, 122, 255, 0.2);
}

.load-more:active {
  transform: scale(0.98);
}

.no-more {
  
}

.no-data {
  text-align: center;
  padding: 40rpx;
  font-size: 28rpx;
  color: #999;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8rpx 32rpx 0 rgba(31, 38, 135, 0.15);
  margin: 20rpx 0;
}

.customer-service-section {
  padding: 20rpx;
  text-align: center;
  margin-top: 30rpx;
}

.customer-service-text {
  color: #fff;
  font-size: 28rpx;
  cursor: pointer;
  padding: 16rpx 30rpx;
  display: inline-block;
  transition: all 0.3s ease;
  background: rgba(0, 122, 255, 0.8);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 300rpx;
  border: 1px solid rgba(0, 122, 255, 0.3);
  box-shadow: 0 4rpx 16rpx 0 rgba(0, 122, 255, 0.3);
  position: relative;
  overflow: hidden;
  font-weight: 500;
  text-align: center;
  /* 去除button默认样式 */
  margin: 0;
  outline: none;
  line-height: 1.4;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.customer-service-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

.customer-service-text:hover {
  color: #fff;
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 20rpx 0 rgba(0, 122, 255, 0.4);
  background: rgba(0, 122, 255, 0.9);
}

.customer-service-text:hover::before {
  left: 100%;
}

.customer-service-text:active {
  background: rgba(0, 86, 179, 0.9);
  transform: scale(0.98);
  box-shadow: 0 4rpx 16rpx 0 rgba(0, 122, 255, 0.3);
}

/* 自定义模态框样式 */
.custom-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.custom-modal {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8rpx 32rpx 0 rgba(31, 38, 135, 0.25);
  width: 80%;
  max-width: 600rpx;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(50rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10rpx rgba(255, 77, 79, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
  }
}

.modal-header {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  padding: 30rpx 20rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-content {
  font-size: 28rpx;
  text-align: center;
  padding: 40rpx 20rpx;
  color: #333;
  line-height: 1.5;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.modal-button {
  flex: 1;
  text-align: center;
  padding: 25rpx 0;
  font-size: 30rpx;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* 联系客服弹窗按钮样式 */
.customer-service-cancel {
  background-color: rgba(245, 245, 245, 0.8);
  backdrop-filter: blur(10px);
  color: #666;
  border-radius: 200rpx;
  font-size: 32rpx;
  border: 1rpx solid rgba(200, 200, 200, 0.5);
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-weight: 500;
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  margin-right: 15rpx;
}

.customer-service-cancel:active {
  background-color: rgba(245, 245, 245, 0.9);
  color: #333;
  box-shadow: 0 1rpx 4rpx 0 rgba(0, 0, 0, 0.15);
}

.customer-service-copy {
  background-color: rgba(0, 122, 255, 0.8);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 200rpx;
  font-size: 32rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 16rpx 0 rgba(0, 122, 255, 0.3);
  transition: all 0.3s ease;
  font-weight: 500;
  flex: 1;
  height: 70rpx;
  line-height: 70rpx; 
  text-align: center;
}

.customer-service-copy:active {
  background-color: rgba(0, 86, 179, 0.9);
  backdrop-filter: blur(15px);
  box-shadow: 0 6rpx 20rpx 0 rgba(0, 122, 255, 0.4);
}


.customer-service-copy:hover::before {
  transform: translateX(100%);
}

/* 地址选择弹窗样式 */
.address-list {
  max-height: 400rpx;
  overflow-y: auto;
}

.address-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}

.address-item:last-child {
  border-bottom: none;
}

.address-item:hover {
  background-color: #f8f9fa;
}

.address-item:active {
  background-color: #e9ecef;
}

.address-location {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.address-detail {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8rpx;
}

.address-primary {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: #52c41a;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-weight: 500;
}
</style>